<template>
  <div
    id="global-search-id"
    class="node-edit-panel-global-search"
    :class="{ 'open-global-search': model }"
    :style="{ width: model ? '400px' : '24px' }"
    @click.stop
  >
    <span
      v-show="model"
      class="select-columns"
      @click="($event) => $event.stopPropagation()"
    >
      <a-dropdown v-model="showMenu" :trigger="['click']">
        <span class="ant-dropdown-title">
          <span
            :title="selectColumns.length > 0 ? selectColumnName : ''"
            class="ant-dropdown-title-text"
          >
            {{ selectColumns.length > 0 ? selectColumnName : '请选择搜索的列' }}
          </span>
          <a-icon type="down" />
        </span>
        <a-menu slot="overlay" style="width: 166px;" @click="onClick">
          <a-menu-item
            v-for="column in tableColumnsName"
            :key="column"
            :class="{ 'selected-column': selectColumns.includes(column) }"
          >
            <span>{{ column }}</span>
            <a-icon v-if="selectColumns.includes(column)" type="check" />
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </span>
    <a-divider v-show="model" type="vertical" />
    <a-input
      v-show="model"
      id="input-global-search-key"
      v-model="searchKey"
      size="small"
      placeholder="请输入..."
      class="search-input"
      allow-clear
      @change="searchDebounce"
    >
      <!-- <a-icon-font
        slot="suffix"
        type="iconwuquanxian-copy"
        class="clean-value-icon"
        @click.stop="clearSearchKey"
      /> -->
    </a-input>
    <a-tooltip v-show="!model" :mouse-enter-delay="0.5">
      <template slot="title">
        <span>搜索</span>
      </template>
      <span style="padding: 0;" class="global-search-icon" @click="clickSearch">
        <a-icon-font type="iconsousuo" />
      </span>
    </a-tooltip>
  </div>
</template>

<script lang="ts">
/**
 * V2.3.1
 */
import { Vue, Component, Watch } from 'vue-property-decorator'
import DataStore from '@/store/modules/dataview'
import { cloneDeep, debounce } from 'lodash'

@Component
export default class GlobalSearch extends Vue {
  private searchKey: string = '' // 搜索关键字
  private model: boolean = false
  public showMenu: boolean = false
  public selectColumns: string[] = [] // 选择的列

  public mounted() {
    document.addEventListener('click', this.onDocumentClick)
  }

  public beforeDestroy() {
    document.removeEventListener('click', this.onDocumentClick)
  }

  public onDocumentClick() {
    this.model = false
  }

  public get tableColumnsName() {
    return DataStore.tableColumns.map((column: any) => column.name)
  }

  public get selectColumnName() {
    return this.selectColumns.toString()
  }

  public get selectNode() {
    return DataStore.selectNode
  }

  @Watch('selectNode.id')
  public watchSelectNode() {
    this.model = false
    this.selectColumns = []
  }

  public onClick($event: any) {
    $event.domEvent.stopPropagation()
    this.showMenu = true
    const { key } = $event
    const index = this.selectColumns.indexOf(key)
    if (index > -1) {
      this.selectColumns.splice(index, 1)
    } else {
      if (this.selectColumns.length === 10) {
        this.$message.warn('最多选择10列！')
        return
      }
      this.selectColumns.push(key)
    }
  }

  public inputFocus() {
    const inputSearchKey: any = document.querySelector(
      '#input-global-search-key'
    )
    inputSearchKey.focus()
  }

  public autoFillColumns() {
    if (this.selectColumns.length === 0) {
      if (this.tableColumnsName.length <= 10) {
        this.selectColumns = cloneDeep(this.tableColumnsName)
      } else {
        this.selectColumns = this.tableColumnsName.slice(0, 10)
      }
    }
  }

  public clickSearch() {
    this.model = true
    this.$nextTick(() => {
      this.autoFillColumns()
      this.inputFocus()
    })
  }

  private searchDebounce = debounce(() => this.confirmSearch(), 600)

  public confirmSearch() {
    const searchKeyTrim: string = this.searchKey.trim()
    if (searchKeyTrim.length > 0) {
      DataStore.setGlobalSearchInfo({
        time: new Date().getTime(),
        columns: this.selectColumns,
        key: searchKeyTrim,
      })
    } else {
      DataStore.closeGlobalSearch()
    }
  }

  // 清空
  public clearSearchKey() {
    this.searchKey = ''
    this.inputFocus()
    this.$nextTick(() => {
      this.confirmSearch()
    })
  }
}
</script>

<style lang="less" scoped>
.node-edit-panel-global-search {
  align-items: center;
  background: transparent;
  display: flex;
  height: 28px;
  justify-content: flex-end;
  overflow: hidden;
  position: absolute;
  right: 78px;
  top: 5.5px;
  transition: width 0.3s;

  .global-search-icon {
    cursor: pointer;
    display: inline-block;
    font-size: 16px;
    height: 28px;
    line-height: 28px;
  }

  .select-columns {
    display: inline-block;
    height: 26px;
    width: 166px;

    .ant-dropdown-title {
      align-items: center;
      display: flex;
      height: 26px;
      justify-content: space-between;
      line-height: 26px;
      width: 166px;

      .ant-dropdown-title-text {
        display: inline-block;
        overflow: hidden;
        text-align: center;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 166px;
      }
    }
  }

  .search-input {
    border: 1px solid transparent;
    display: inline-block;
    height: 26px;
    overflow: hidden;
    width: 200px;

    /deep/.ant-input-sm {
      border: 1px solid transparent;
      padding-right: 24px;
    }

    /deep/.ant-input-suffix {
      right: 6px;
    }
  }

  .clean-value-icon {
    color: rgba(69, 73, 255, 0.6);
    cursor: pointer;
    font-size: 16px;
  }
}

.open-global-search {
  background: #fff;
  border: 1px solid #6973ff;
  border-radius: 14px;
}

.selected-column {
  background: #fafafa;
  display: flex;
  justify-content: space-between;
}
</style>
